import { priceSwitchUnit } from '@/utils';
import { useSize } from 'ahooks';
import * as echarts from 'echarts';
import { Ref, useEffect, useImperativeHandle, useRef } from 'react';

export type TrendProps = {
  dateData: string[];
  valData: number[];
};
interface Props {
  innerRef: Ref<{ setData: (dataobj: TrendProps) => void } | undefined>;
  unit?: string;
}
export default function ChartTrend({ innerRef, unit }: Props) {
  const chartDom = useRef<HTMLDivElement>(null);
  const myChart = useRef<echarts.EChartsType>();
  const size = useSize(chartDom.current);
  /**
   * 图表数据
   */
  useEffect(() => {
    if ((!myChart.current || myChart.current.isDisposed()) && chartDom.current) {
      // 初始化值
      myChart.current = echarts.init(chartDom.current);
      myChart.current.setOption({
        xAxis: {
          type: 'category',
          axisLine: {
            show: true, //是否展示
            lineStyle: {
              color: '#E9EFF3',
            },
          },
          axisLabel: {
            rotate: 0, //文字旋转
            textStyle: {
              color: '#999',
              fontSize: '12px',
            },
          },
          // boundaryGap: false //x轴两边不留空白
        },
        yAxis: {
          type: 'value',
          name: unit ? `单位/${unit}` : null,
          nameTextStyle: {
            color: '#333',
            align: 'right',
          },
          boundaryGap: false, //Y轴两边不留空白
          axisLine: {
            //y轴线的配置
            show: false, //是否展示
            lineStyle: {
              color: '#E9EFF3',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#999',
              fontSize: '12px',
            },
            formatter: function (value: string | number) {
              return priceSwitchUnit(value);
            },
          },
        },
        grid: {
          left: 36,
          top: 30,
          right: 28,
          bottom: 10,
          containLabel: true,
        },
        // legend: {
        //   data: ['得分'],
        //   x: 'right',
        // },
        tooltip: {
          //提示框组件
          trigger: 'axis',
          formatter: function (params: { name: string; value: string }[]) {
            const htmlText = `<div  style="color:#333;font-size:14px;line-height:20px"><p style="margin-bottom:6px" >${
              params[0].name
            }</p><span style="font-weight:600;margin-right:2px">${params[0].value}${unit ?? ''}</span></div>`;
            return htmlText;
          },
        },
        series: [
          {
            name: '安全指数',
            type: 'line',
            smooth: true,
            symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
            // symbolSize: 5,
            itemStyle: {
              normal: {
                color: '#3BA4FF',
              },
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(59, 164, 255, 0.08)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(59, 164, 255, 0)', //   0% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      });
      return () => {
        if (myChart.current && !myChart.current.isDisposed()) {
          echarts.dispose(myChart.current);
        }
      };
    }
  }, []);

  // 方法暴露
  useImperativeHandle(
    innerRef,
    () => ({
      setData(dataobj: TrendProps) {
        if (myChart.current) {
          myChart.current.setOption({
            xAxis: {
              data: dataobj.dateData,
            },
            series: [
              {
                data: dataobj.valData,
              },
            ],
          });
        }
      },
    }),
    [],
  );
  useEffect(() => {
    if (myChart.current) {
      myChart.current.resize();
    }
  }, [size]);

  return (
    <div className="card-content" style={{ width: '100%' }}>
      <div ref={chartDom} style={{ width: '100%', height: '312px' }}></div>
    </div>
  );
}
